<!--
 * @Author: zhaoziyin
 * @Date: 2022-09-03 10:11:29
 * @LastEditTime: 2022-09-12 11:55:48
 * @LastEditors: zhaoziyin
 * @Description: 一直游到海水变蓝
 * @FilePath: \项目\西安\xxtx-ui\src\components\Header.vue
 * 别乱动！
-->
<template>
  <div>
    <!-- 头部开始 -->
    <div class="header">
      <!-- 小蓝条 -->
      <div class="header_top">
        <!-- 给一个版心 -->
        <div class="wrapper">
          <div class="left"></div>
          <div class="right">
            <ul>
              <li>学生</li>
              <li>教工</li>
              <li>校友</li>
              <li>访客</li>
              <li>常用链接</li>
              <li>书记 | 校长</li>
              <li>ENG</li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- logo -->
      <div class="header_bottom">
        <div class="wrapper">
          <div class="logo">
            <img height="50px" src="@/assets/yxtx/logo.png" alt="" />
          </div>
          <!-- 栏目分类 -->
          <div class="article">
            <ul>
              <li
                v-for="item in categories"
                :key="item.id"
              >
                {{ item.category.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部结束 -->
  </div>
</template>
  <script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      categories: [],
    };
  },
  methods: {
    async getCategories() {
      let res = await get("/index/article/findCategoryArticles");
      this.categories = res.data;
      // console.log(this.categories);
    },
  },
  created() {
    this.getCategories();
  },
};
</script>
<style lang="scss">
.header {
  .header_top {
    background-color: rgb(34, 103, 177);
    .wrapper {
      display: flex;
      justify-content: space-between;
      line-height: 30px;
      color: white;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          margin-right: 10px;
          font-size: 12px;
        }
      }
    }
  }
  .header_bottom {
    margin-top: 15px;
    .wrapper {
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      .article {
        padding-top: 20px;
        ul {
          display: flex;
          justify-content: space-between;
          .current {
            background-color: #014791;
            color: white;
          }
          li {
            margin-right: 10px;
            // padding: 0.8em;
            color: rgb(34, 103, 177);
            font-size: 18px;
          }
          li:hover {
            // height: 50px;
            background-color: rgb(34, 103, 177);
            color: white;
            cursor: pointer;
          }
        }
      }
    }
  }
}
// 头部样式结束
</style>